import * as echarts from "echarts";
import { useEffect, useRef } from "react";
import { useChannel } from "../../../hooks/useChannel";

const Histogram = ({ title }) => {
  const { channelList } = useChannel();
  const echartsRef = useRef(null);
  useEffect(() => {
    const chartDom = echartsRef.current;
    const myChart = echarts.init(chartDom);
    const option = {
      title: {
        text: title,
      },
      xAxis: {
        type: "category",
        data: channelList.slice(0, 13).map((item) => item.name),
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: channelList
            .slice(0, 13)
            .map(() => Math.floor(Math.random() * channelList.length)),
          type: "bar",
        },
      ],
    };

    option && myChart.setOption(option);
  }, [channelList]);
  return (
    <div ref={echartsRef} style={{ width: "100%", height: "400px" }}></div>
  );
};

export default Histogram;
